<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星星点灯</title>
    <meta name="description" content="星星点灯网，致力于关爱自闭症人群">
    <meta name="keywords" content="自闭症，关爱，志愿者">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/post-content.css">
    <link rel="stylesheet" href="./css/head.css">
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
   <!-- 头部 -->
   <header id="head">
    <!-- 快捷菜单  -->
    <div class="post-shortcut">
        <nav class="container">
            <div class="logo fl">
            </div>
            <ul class="left fl">
                <li><a href="#">活动</a></li>
                <li>|<a href="./post.html">论坛</a></li>
                <li>|<a href="#">义卖</a></li>
            </ul>
            <ul class="right fr">
                <li v-if="isLoad" @click="load"><a href="#">未登录</a>|</li>
                <li v-if="!isLoad"><a href="#"><div class="ava"><img src="./uploads/ava.jpg" alt="" @mouseover="cardLoad" :class="!cardShow?'small':'big'"></div></a><span>吃果冻</span>|</li>
                <li v-if="!isLoad" @click="load"><a href="#">退出登录</a>|</li>
                <li v-if="!isLoad"><a href="#">个人主页</a>|</li>
                <li><a href="#">客服</a></li>
            </ul>
        </nav>
    </div>
    <div class="card"  v-if="cardShow" @mouseleave="cardLoad">
        <ul>
            <li>监护人</li>
            <li><a href="#">收到的消息</a></li>
            <li><a href="#">收到的回复</a></li>
            <li><a href="#">待办的活动</a></li>
        </ul>
    </div>
</header>
    <!-- 导航栏 -->
    <nav>
        <div class="content-nav container">
            <div class="content-class fl">经验贴</div>
            <h1 class="theme fl">本帖子的主题</h1>
        </div>
    </nav>
    <!-- 内容栏的楼主栏 -->
    <div>
        <div class="content-onwer container">
            <div class="owner-info fl">
                <div class="ava"></div>
                <p class="nic">吃酸奶</p>
                <p class="floor">1楼</p>
                <p class="time">2021-07-24 2:48</p>
            </div>
            <div class="content-detail fl">
                <p>帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容
                </p>
            </div>
        </div>
    </div>
    <!-- 内容栏的其他楼栏 -->
    <div>
        <div class="content-other container">
            <div class="other-info fl">
                <div class="ava"></div>
                <p class="nic">吃果冻</p>
                <p class="floor">x楼</p>
                <p class="time">2021-07-24 3:48</p>
            </div>
            <div class="content-detail fl">
                <p>帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容
                </p>
            </div>
            <div class="action fl">
                <div class="ref-bot fr">
                    <div class="ref-bot-pic fl"></div>
                    <span>回复</span>
                </div>
                <div class="like fr">
                    <div class="like-pic fl"></div>
                    <span>50</span>
                </div>
            </div>
            <div class="ref fl">
                <p><span>吃酸奶：</span><span>回复内容回复内容回复内容回复内容</span></p>
                <p><span>吃牛奶：</span><span>回复内容回复内容回复内容回复内容</span></p>
                <p><span>吃面包：</span><span>回复内容回复内容回复内容回复内容</span></p>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <aside class="button fl">
        <a href="#ref" class="aside-ref" title="回复楼主"></a>
        <div class="aside-like"></div>
        <div class="aside-collect"></div>
        <div class="report"></div>
    </aside>
    <!-- 帖子回复 -->
    <div class="post-release container">
        <form>
            <input type="text" class="headline" placeholder="回复楼主">
            <textarea class="content" cols="110" rows="10" class="content" placeholder="输入你的回复内容"></textarea>
            <br>
            <!-- <div class="ref-posttype fl">
        <span>帖子类型：</span>
       <span> <input type="radio" name="post-type"> 经验贴</span>
        <span><input type="radio" name="post-type"> 科普贴</span>
       <span> <input type="radio" name="post-type"> 求助贴</span>
        <span><input type="radio" name="post-type"> 交流贴</span>
        </div> -->
            <input type="submit" class="ref-submit">
        </form>
    </div>
    <a name="ref"></a>
    <script src="./js/head.js" type="text/javascript"></script>
</body>

</html>